// 配置路由相关的信息
// /* require: 本质上是将要导出的对象赋值给module这个的对象的export属性，
//      在其他文件中通过require这个方法访问该属性。require是赋值过程，把值赋给某个变量。
//   import：导出的对象必须与模块中的值一一对应，换一种说法就是导出的对象与整个模块进行结构赋值。
//      import是解构过程
// * */
// // 第一步：导入路由
 import VueRouter from 'vue-router'
 import Vue from 'vue'
// import Home from '../components/Home'
// import About from '../components/About'
 // import User from '../components/User'

 //使用懒加载的方式来加载组件
 const Home = () => import('../components/Home')
 const About = () => import('../components/About')
 const User = () => import('../components/User')
 const HomeNews = () => import('../components/HomeNews')
 const HomeMessage = () => import('../components/HomeMessage')
 const Profile = () => import('../components/Profile')

 // 第二步：通过Vue.use(插件)，来安装插件,其他插件都要这样做
 Vue.use(VueRouter)

 const routes=[
// 一个映射关系就是一个对象
   {
     // 配置默认路径
     path:'',
    // redirect重定向 ,如果path是‘’，则重定向到/Home
     redirect:'/Home'
  },

   {
     path:'/Home',
     component:Home,
     meta:{
       title :'首页'
     },
     // 配置Home的子路由的映射关系
     children:[
       /*{
         //配置子路由的默认路径
         path:'',
         redirect:'news'
       },*/
       {
         // 子路由里的path不用加/
         path:'news',
        component:HomeNews
       },
       {
        path:'message',
         component:HomeMessage
       }
     ]
   },
   {
    path:'/About',
     component: About,
     meta:{
       title :'关于'
     },
     //路由独享的守卫 使用beforeEnter函数，这些守卫与全局前置守卫的方法参数是一样的。
     beforeEnter:(to,from,next) => {
       console.log('路由独享守卫');
       next()
     }
   },
   {
     path:'/User/:abc',
     component: User,
     meta:{
       title :'用户'
     }
   },
   {
     path:'/Profile',
     component:Profile,
     meta:{
       title:'档案'
     }
   }
 ]

// 3.创建VueRouter对象，按Ctrl键再点VueRouter可以点进插件的源代码里面
 const router=new VueRouter({
   // 配置路由和组件之间的映射关系
   routes,
   // 默认是通过hash来改变路径，可以设置为：通过html5的history模式来改变路径
   mode:'history',
   // 当点击当前router-link生成的a标签时，它的class会自动生成一个router-link-active，
   // 当点击另一个时，当前的router-link的class：router-link-active又会取消掉。另一个生成这个class
   // linkActiveClass：可以修改<router-link>中自动生成的class名的默认值router-link-active为任意值
   linkActiveClass:'active'
 })

 //vue-router提供了beforeEach和afterEach的钩子函数, 它们会在路由即将改变前和改变后触发
 /*导航钩子的三个参数解析:
     to: 即将要进入的目标的路由对象.
     from: 当前导航即将要离开的路由对象. 从from跳转到to
      next: 调用该方法后, 才能进入下一个钩子.*/
// beforeEach函数：前置钩子，马上跳转之前触发，跳转之前就把title改变了
 router.beforeEach((to,from,next) => {
   //  to就是Route路由对象  matched[0]:如果有配置子路由，那么就取第一个父路由
   document.title=to.matched[0].meta.title
   console.log(to);
   console.log('++++');
   next()
 })

 router.afterEach((to,from) => {
   console.log('----'); // 会先调用beforeEach再调用afterEach
 })
// // 4 将routers对象传入到Vue实例中
export default router

